<template>
    <div>
        
        <table class="table table-info">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model="AllCheck" @change="AllTOP">全选 </th>
                    <th>房间名称[房号]</th>
                    <th>房间价格</th>
                    <th>房型</th>
                    <th>房间图片</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data">
                    <td><input type="checkbox" :value="item.houseID" v-model="ids" @change="Invert"> </td>
                    <td>{{item.houseName}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.tName}}</td>
                    <td><img :src="'https://localhost:7145'+item.houseImg" style="width: 100px;height: 100px;" alt=""></td>
                    <td>{{item.state==true?"上架":"下架"}}</td>
                    <td>
                        <input type="button" v-if="item.state==false" value="上架" @click="UpdateState(item.houseID)">
                        <input type="button" v-else value="下架" @click="UpdateState(item.houseID)">
                        <a :href="'https://localhost:7145'+item.houseImg" target="_blank">点击看图</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" class="btn btn-outline-info" @click="pageing(1)">
        <input type="button" value="上一页" class="btn btn-outline-info" @click="pageing(2)">
        <input type="button" value="下一页" class="btn btn-outline-info" @click="pageing(3)">
        <input type="button" value="尾页" class="btn btn-outline-info" @click="pageing(4)">
        共有{{pageCount.IndexCount}}条,每页{{page.pageSize}}条, 共有{{pageCount.SizeCount}}页 ,当前页{{page.pageIndex}}
        页容量:
        <select v-model="page.pageSize" @change="ChangeSize">
            <option :value="2">2</option>
            <option :value="3">3</option>
            <option :value="5">5</option>
            <option :value="8">8</option>
        </select>
        跳转到: <input type="text" v-model="page.pageIndex" @change="changeIndex">
        <input type="button"  value="批量删除" @click="DelAll">
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios, { all } from 'axios';
import { useRouter } from 'vue-router';
var router = useRouter();
//房间表
const data=ref([{
    "houseID": 0,
      "houseName": "",
      "price": 0,
      "tid": 0,
      "houseImg": "",
      "state": true,
      "tname": ""
}])
//全选model
const AllCheck=ref(false);
//反选存储数组
const ids = ref<number[]>([]);
onMounted(()=>{
    Show();
})
//参数
const page = ref({
    pageIndex:1,
    pageSize:2
})
//总条数 总页数
const pageCount = ref({
    IndexCount:1,
    SizeCount:2
})
//分页
const pageing=(val:any)=>{
    if(val==1)
    {
        page.value.pageIndex=1;
        Show();
    }
    if(val==2)
    {
        if(page.value.pageIndex >1)
        {
            page.value.pageIndex -=1;
            Show();
        }
        else
        {
            alert("这是第一页");
        }
    }
    if(val==3)
    {
        if(page.value.pageIndex <pageCount.value.SizeCount)
        {
            page.value.pageIndex +=1;
            Show();
        }
        else
        {
            alert("这是最后一页");
        }
    }
    if(val==4)
    {
        page.value.pageIndex=pageCount.value.SizeCount;
        Show();
    }
}
//页容量改变
const ChangeSize=()=>{
    page.value.pageIndex=1;
    Show();
}
//跳转页
const changeIndex=()=>{
    if(page.value.pageIndex >pageCount.value.SizeCount)
    {
        page.value.pageIndex=1;
        Show();
        alert("超出页码范围");
        return;
    }
    Show();
}
//显示
const Show=()=>{
    axios.get("https://localhost:7145/api/Hotel/GetHotel",{params:page.value}).then(res=>{
        data.value =res.data.row;
        pageCount.value.IndexCount =res.data.count;
        pageCount.value.SizeCount = Math.ceil(pageCount.value.IndexCount/page.value.pageSize);
    })
}
//全选
const AllTOP=()=>{
    if(AllCheck.value)
    {
        data.value.forEach(element => {
            ids.value.push(element.houseID);
        });
    }
    else
    {
        ids.value = [];
    }
}
//反选
const Invert=()=>{
    if(ids.value.length==data.value.length)
    {
        AllCheck.value =true;
    }
    else
    {
        AllCheck.value =false;
    }
}
//批量删除
const DelAll=()=>{
    if(!confirm("确认删除吗"))
    {
        return;
    }
    axios.delete("https://localhost:7145/api/Hotel/DeleteHotel",{params:{idstring:ids.value.toString()}}).then(res=>{
        if(res.data>0)
        {
            alert("删除成功");
            AllCheck.value=false;
            Show();
        }
        else
        {
            alert("删除失败")
        }
    })
}
//修改状态
const UpdateState=(Vid:any)=>{
    axios.get("https://localhost:7145/api/Hotel/UpdateSta",{params:{id:Vid}}).then(res=>{
        if(res.data>0)
        {
            alert("修改成功");
            Show();
        }
        else
        {
            alert("修改失败");
        }
    })
}
</script>

<style scoped>

</style>